<template>
	<div id="appRoot">
		<sidebar>
			<card label="个人信息">
				<el-form label-position="left" inline class="pesonal-form">
					<el-form-item label="登录工号：">
						<span>{{data.account}}</span>
					</el-form-item>
					<el-form-item label="姓名：">
						<span>{{data.name}}</span>
					</el-form-item>
					<el-form-item label="所在组织：">
						<span>{{data.merName}}</span>
					</el-form-item>
					<el-form-item label="角色：">
						<span>{{data.roleName}}</span>
					</el-form-item>
				</el-form>
			</card>
			<br>
			<card label="帐号安全">

				<el-form label-position="left" class="pesonal-form" label-width="80px">
					<el-form-item label="手机号：">
						<span>{{data.phone}}</span> <el-button type="text" icon="edit" @click="openPhoneDialog"></el-button>
					</el-form-item>
					<el-form-item label="密  码：">
						<span>**************</span> <el-button type="text" icon="edit" @click="openPwdDialog"></el-button>
					</el-form-item>
				</el-form>
			</card>
		</sidebar>
		<el-dialog title="修改手机号" :visible.sync="dialogPhoneVisible" @close="closePhoneDialog" class="dialog-form">
			<el-form :model="dialogPhoneData" :rules="dialogPhoneRules" ref="dialogPhoneForm">
				<el-form-item label="手机号：" :label-width="'120px'" prop="phone">
					<el-input v-model="dialogPhoneData.phone" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closePhoneDialog">取 消</el-button>
				<el-button type="primary" @click="submitPhoneDialog">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="修改密码" :visible.sync="dialogPwdVisible" @close="closePwdDialog" class="dialog-form">
			<el-form :model="dialogPwdData" :rules="dialogPwdRules" ref="dialogPwdForm">
				<el-form-item label="密码：" :label-width="'120px'" prop="pwd">
					<el-input v-model="dialogPwdData.pwd" auto-complete="off" type="password"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closePwdDialog">取 消</el-button>
				<el-button type="primary" @click="submitPwdDialog">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import sidebar from 'components/layout/sidebar.vue'
	import card from 'components/layout/card.vue'
    import ajax from 'common/ajax.js'
    import ajaxUrls from 'common/ajaxUrls.js'
	export default{
		data(){
			return{
                dialogPhoneVisible: false,
                dialogPhoneData:{
                    phone: ''
				},
                dialogPhoneRules: {
                    phone: [
                        {required: true, message: '请填写手机号', trigger: 'blur'}
					]
                },
                dialogPwdVisible: false,
                dialogPwdData: {
                    pwd: ''
				},
                dialogPwdRules: {
                    pwd: [
                        {required: true, message: '请填写密码', trigger: 'blur'}
                    ]
				},
				loading: false,
				data: {
                    account: '',
                    merName: '',
                    name: '',
                    phone: '',
                    roleName: ''
				}
			}
		},
		mounted(){
		    this.getData();
		},
		methods: {
            openPhoneDialog(){
                if(this.$refs.dialogPhoneForm){
                    this.$refs.dialogPhoneForm.resetFields();
				}
                this.dialogPhoneData.phone = this.data.phone;
                this.dialogPhoneVisible = true;
			},
            closePhoneDialog(){
                this.dialogPhoneVisible = false;
			},
            submitPhoneDialog(){
                this.$refs.dialogPhoneForm.validate((valid) => {
                    if (valid) {
                        ajax({
                            method: 'post',
                            url: ajaxUrls.apiUrl.sysUser,
                            action: 'modPhoneByCode',
                            data: {
                                account: this.data.account,
                                phone: this.dialogPhoneData.phone
                            }
                        }).then(data => {
                            this.data.phone = this.dialogPhoneData.phone;
                            this.closePhoneDialog();
                        }).catch((err) => {

                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
			},
            openPwdDialog(){
                if(this.$refs.dialogPwdForm){
                    this.$refs.dialogPwdForm.resetFields();
                }
                this.dialogPwdVisible = true;
            },
            closePwdDialog(){
                this.dialogPwdVisible = false;
            },
            submitPwdDialog(){
                this.$refs.dialogPwdForm.validate((valid) => {
                    if (valid) {
                        ajax({
                            method: 'post',
                            url: ajaxUrls.apiUrl.sysUser,
                            action: 'resetPwd',
                            data: {
                                account: this.data.account,
                                pwd: this.dialogPwdData
                            }
                        }).then(data => {
                            this.closePwdDialog();
                        }).catch((err) => {

                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
			getData(){
                this.data = this.$userInfo
			}
		},
		components:{
			sidebar,
			card
		}
	}
</script>

<style lang="scss">
	.pesonal-form{
		padding-left: 20px;
		.el-form-item{
			margin-bottom: 0;
		}
	}
</style>